<template>
  <div style="margin-bottom: 10px">
    <el-row :gutter="20">
      <el-col
        :span="item.span ? item.span : 6"
        v-for="(item, index) in options"
        v-if="index <= 2 || isOpen"
        :key="item.name"
        :style="{ marginTop: index >= 4 ? '10px' : '' }"
      >
        <div class="daj" style="font-size: 14px" v-if="item.type == 'input'">
          <div>{{ item.name }}</div>
          <el-input
            style="flex: 1"
            v-model="item.value"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
          <div v-if="item.suffix">{{ item.suffix }}</div>
        </div>
        <div
          class="daj"
          style="font-size: 14px"
          v-else-if="item.type == 'select'"
        >
          <div>{{ item.name }}</div>
          <Eselect
            filterable
            style="flex: 1"
            isClearable
            :options="item.options"
            :value="item.value"
            @EselectChange="item.value = $event"
          ></Eselect>
        </div>
        <!-- 年月日时分秒范围 -->
        <div
          class="daj"
          style="font-size: 14px"
          v-else-if="item.type == 'datePicker'"
        >
          <div>{{ item.name }}</div>
          <el-date-picker
            style="flex: 1"
            size="small"
            v-model="item.value"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm"
            format="yyyy-MM-dd HH:mm"
            :default-time="['00:00:00', '23:59:00']"
          >
          </el-date-picker>
        </div>
        <!-- 年月日范围 -->
        <div
          class="daj"
          style="font-size: 14px"
          v-else-if="item.type == 'dateRange'"
        >
          <div>{{ item.name }}</div>
          <el-date-picker
            size="small"
            style="flex: 1"
            v-model="item.value"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="item.clearable"
          >
          </el-date-picker>
        </div>
        <!-- 年月范围 -->
        <div
          class="daj"
          style="font-size: 14px"
          v-else-if="item.type == 'monthRange'"
        >
          <div>{{ item.name }}</div>
          <el-date-picker
            size="small"
            style="flex: 1"
            v-model="item.value"
            value-format="yyyy-MM"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            :clearable="item.clearable"
            :picker-options="item.pickerOptions"
          >
          </el-date-picker>
        </div>
        <!-- 单个年月日 -->
        <div
          class="daj"
          style="font-size: 14px"
          v-else-if="item.type == 'date'"
        >
          <div>{{ item.name }}</div>
          <el-date-picker
            size="small"
            style="flex: 1"
            v-model="item.value"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </div>
        <div
          class="daj"
          style="font-size: 14px"
          v-else-if="item.type == 'rangeInput'"
        >
          <div>{{ item.name }}</div>
          <el-input
            style="flex: 1"
            v-model="item.value1"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
          -
          <el-input
            style="flex: 1"
            v-model="item.value2"
            placeholder="请输入"
            size="small"
            clearable
          ></el-input>
        </div>
        <div
          class="da"
          style="font-size: 14px; height: 32px; width: 100%"
          v-else-if="item.type == 'checkBox'"
        >
          <el-checkbox v-model="item.value">{{ item.name }}</el-checkbox>
        </div>
        <div
          class="da"
          style="font-size: 14px; height: 32px; width: 100%"
          v-else-if="item.type == 'radioGroup'"
        >
          <div>{{ item.name }}</div>
          <el-radio-group v-model="item.value">
            <el-radio
              :label="radio.value"
              :key="radioInd"
              v-for="(radio, radioInd) in item.options"
              >{{ radio.label }}</el-radio
            >
          </el-radio-group>
          <div style="margin-left: 10px" class="da" v-if="item.showBtn">
            <el-button
              type="success"
              @click="getData()"
              size="small"
              icon="el-icon-search"
              :disabled="queryDisabled"
              >查询</el-button
            >
            <el-button
              @click="emitFn('resettingFn')"
              size="small"
              icon="el-icon-refresh"
              >重置</el-button
            >
            <div
              style="cursor: pointer; color: #66b1ff; margin-left: 10px"
              @click="openFn()"
            >
              {{ isOpen ? "收起" : "展开" }}
              <i
                style="color: #66b1ff"
                :class="isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              ></i>
            </div>
          </div>
        </div>
      </el-col>
      <el-col
        v-if="aloneBtn || !isOpen"
        class="da"
        :span="6"
        :style="{ marginTop: options.length >= 4 && isOpen ? '10px' : '' }"
      >
        <el-button
          type="success"
          @click="getData()"
          size="small"
          icon="el-icon-search"
          :disabled="queryDisabled"
          >查询</el-button
        >
        <el-button
          @click="emitFn('resettingFn')"
          size="small"
          icon="el-icon-refresh"
          >重置</el-button
        >
        <div
          v-if="options.length >= 4"
          style="cursor: pointer; color: #66b1ff; margin-left: 10px"
          @click="openFn()"
        >
          {{ isOpen ? "收起" : "展开" }}
          <i
            style="color: #66b1ff"
            :class="isOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
          ></i>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Eselect from "@/components/Eselect";
export default {
  components: {
    Eselect,
  },
  props: {
    // 外部传入默认数据，展示数据，不调用getData方法获取
    options: {
      type: Array,
    },
    // 按钮是否是单独，不与内容混合在一起
    aloneBtn: {
      type: Boolean,
      default: true,
    },
    // 是否禁用按钮
    btnDisabled: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isOpen: false,
      queryDisabled: false,
    };
  },
  // 数据改变就重新赋值给外部的搜索条件
  watch: {
    btnDisabled: {
      handler(val) {
        this.queryDisabled = val;
      },
      immediate: true,
    },
    // options: {
    //   handler(val) {
    //     console.log(val);
    //   },
    //   deep: true,
    // },
  },
  methods: {
    // 搜索
    getData() {
      let obj = {};
      this.options.forEach((item) => {
        if (item.type == "rangeInput") {
          obj[item.key1] = item.value1;
          obj[item.key2] = item.value2;
          return;
        }
        obj[item.key] = item.value;
      });
      this.$emit("getData", JSON.parse(JSON.stringify(obj)));
    },
    // 传递方法出去
    emitFn(val) {
      this.$emit(val);
    },
    // 展开与收起
    openFn() {
      this.isOpen = !this.isOpen;
      this.$emit("openChange", this.isOpen);
    },
  },
};
</script>
